<template>
    <div id="app">
        <el-container>
            <el-header>
                <p>-------我是头部--------</p>
            </el-header>
            <el-container>
                <el-aside width="200px">
                    <el-menu router default-active="/" class="el-menu-vertical-demo">
                        <el-menu-item index="/">
                            <i class="el-icon-document"></i>
                            <span slot="title">主页</span>
                        </el-menu-item>
                        <el-menu-item index="/Home">
                            <i class="el-icon-location"></i>
                            <span slot="title">home</span>
                        </el-menu-item>
                        <el-menu-item index="/About">
                            <i class="el-icon-menu"></i>
                            <span slot="title">about</span>
                        </el-menu-item>
                        <el-menu-item index="/Login">
                            <i class="el-icon-menu"></i>
                            <span slot="title">Login</span>
                        </el-menu-item>
                    </el-menu>
                </el-aside>
                <el-main>
                   <keep-alive> <!-- 如果不用keep-alive 在切换home和about的路由 -->
                        <router-view></router-view>
                    </keep-alive>
                </el-main>
            </el-container>
        </el-container>
    </div>
</template>
<script>
export default {
    name: 'App',
    components: {
    },
    data() {
        return {

        }
    }

}
</script>
<style lang="less">
#app {
    font-family: Avenir, Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-align: center;
    color: #2c3e50;
    h2{
      color:red;
    }
}

#nav {
    padding: 30px;

    a {
        font-weight: bold;
        color: #2c3e50;

        &.router-link-exact-active {
            color: #42b983;
        }
    }
}
</style>
